import {reactive} from 'vue';

/**
 * 弹框标题
 */
export enum DialogTypeEnum {
    ADD = '新增',
    EDIT = '编辑',
    VIEW = '查看'
}

/**
 * 弹框属性类型
 */
export type DialogModel = {
    title: string, // 标题
    visible: boolean, // 是否展示
    height: number, // 高度，单位：vh， 1vh = 1% * 视口高度
    width: number, // 宽度，单位：vh， 1vh = 1% * 视口高度
    showSubmit?: boolean, // 是否展示提交按钮
    showClose?: boolean // 是否展示关闭按钮
    formDisabled?: boolean // 是否禁用表单
}

/**
 * 弹窗统一封装
 */
export default function dialogPopup() {

    //定义弹框属性
    const dialog = reactive<DialogModel>({
        title: '',
        visible: false,
        width: 55, /* 单位：vh */
        height: 55, /* 单位：vh  */
        showSubmit: true,
        showClose: true,
        formDisabled: false
    })

    //展示
    const onShow = () => {
        dialog.visible = true;
    }

    //关闭
    const onClose = () => {
        dialog.visible = false;
    }

    // 确定
    const onConfirm = () => {
        dialog.visible = false;
    }

    /**
     * 表单展示
     * @param type
     */
    const showBtn = (type: DialogTypeEnum) => {
        if (DialogTypeEnum.ADD === type || DialogTypeEnum.EDIT === type) {
            dialog.showSubmit = true
            dialog.formDisabled = false
        }
        if (DialogTypeEnum.VIEW === type) {
            dialog.showSubmit = false
            dialog.formDisabled = true
        }
    }


    return {
        dialog,
        onShow,
        onClose,
        onConfirm,
        showBtn
    }

}